<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    1》开发环境(webpack)

    注意：不是所有的浏览器都支持es6语法

    package.json ==>npm init
    node_modules ==>npm install webpack -D
    webpack.config.js==>配置文件
    src(开发阶段目录)
    index.html
    index.js
    js
    01.js
    02.js
    public(生产阶段目录)

    babel把es6的语法转换为es5，es3

    babel-polyfill＝＝》很多语法的api不能转码,需要安装polyfill

    2》知识点

    1》es6语法使用

    a>let
    1》作用域，只能在本代码块内有效
    2》不具有变量提升性（不能转码）
    3》不具有重复声明
    b>const(常量)
    1》常量的值就不能改变
    2》声明必须赋值
    3》对象（引用类型）。可以修改赋值

    场景：公司的地址，公司电话

    c>变量的解构赋值

    1》数组解构赋值

    格式: let [a,b,c] = [1,2,3]

    注意：
    1>如果匹配不到，则变量是undefined
    2>如果等号的右边不是数组(或者严格地说，不是可遍历的结构)，那么就报错

    默认值：

    let [a=true] = [];

    2》对象解构赋值

    格式： let {a,b,c} = {a:1,b:2,c:3}

    注意：
    1》如果匹配不到，则变量是undefined

    默认值: let {a=true}

    3》字符串解构赋值

    格式： let [a,b,c] = '123'
    注意：
    1》如果匹配不到，则变量是undefined
    4》数值解构赋值
    5》布尔解构赋值
    6》函数解构赋值

    d>字符串的扩展

    1》Unicode

    注意：
    1》超出了FFFF范围 ： 𠮷
    2》解决超出不能正确识别的字符：{}
    2》新增方法：

    codePointAt() ==》可以识别32位的UTF-16字符。
    应用场景：判断当前字符是否大于＝＝》0xFFFF
    at() ===》修正了charAt()不能解析大于0xFFFF字符的

    3》方法
    includes()：返回布尔值，表示是否找到了参数字符串。
    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
    repeat() : 返回一个新字符串，表示将原字符串重复n次。
    padStart():ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
    padEnd() :ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

    4》模版字符串

    格式:``
    加入内容：`${变量名称....}`

    5》标签模版

    alert() ===> alert``
    注意：
    1》加入变量，会先把字符串放入到一个数组中

    f>正则

    1》构造函数

    new RegExp(/xxx/ig,'i');
    参数2（修饰符）会覆盖前面的修饰符

    2》属性

    flags ＝＝》返回正则表达式的修饰符
    sticky ＝＝》看一看有没有开启y模式

    3》修饰符

    y : y和g特别像（全文匹配）
    区别：
    g:后面有就可以了
    y:从匹配后面第一个开始算
    u : 正确处理大于\uFFFF的 Unicode 字符

    g》数值扩展

    1》注意点

    parseInt() parseFloat()
    都是在全局对象下(window)

    ES6:

    Number.parseInt()
    Number.parseFloat()

    2》Number对象新增方法

    Number.isFinite() : 检测一个数值是否有限
    Number.isNaN() : 检测一个数值是否是NaN
    Number.isInteger() : 判断一个数值是否为整数

    3》Math对象新增方法

    Math.trunc() : 去除小数部分，返回整数部分
    Math.sign() : 判断一个数值是：整数，负数，0

    整数：1
    负数：－1
    0:0
    -0:-0
    其他:NaN

    h>函数的扩展

    1》函数参数的默认值

    function fn(obj=xx)

    2》函数作用域
    3》rest (...)
    4》箭头函数

    (参数1,参数2)=>{

    }

    1》arguments对象
    2》不能new
    3》this指向

    i>数组的扩展

    1》运算符(...)
    2》方法

    1》Array.from() : 把一个看起来类似于数组的对象，转换成真正的数组
    2》Array.of() : 把一组值，转换为数组
    3》copyWithin() : 将指定位置的成员复制到其他位置（会覆盖原有成员）,最后返回新的数组

    参数1》target ：从该位置开始替换数据。
    参数2》start ：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
    参数3》end ：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
    4》find()
    5》findIndex()
    6》fill() : 填充数组

    参数1》替换成什么
    参数2》开始位置
    参数3》结束位置

    7》得到key value
    数组实例的 entries()，keys() 和 values()

    8》includes() : 返回的是布尔值

    j>对象的拓展


    1》属性的简洁表示法＊＊＊＊

    let obj = {
    a
    }

    2》属性名表达式
    3》方法的 name 属性
    4》Object.is() : 比较
    ==
    ===
    5》Object.assign()

    方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

    6》对象属性的可枚举性和遍历

    Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

    7》遍历

    Object.keys()
    Object.values()
    Object.entries()

    k》class基本语法

    格式：
    class 名称{

    constructor(){

    }

    方法名称1(){

    }
    方法名称2(){

    }

    }

    new 名称();

    ***class实现继承

    格式：
    class 子类 extends 父类{

    constructor(){

    super() //在最前面放置

    }

    }
    l》symbol

    作用：解决命名冲突
    概述：
    1》一种新的原始数据类型Symbol
    2》表示独一无二的值
    使用：
    1》symbol
    2》symbol.for()
    取值：
    Object.getOwnPropertySymbols
    Reflect.ownKeys
    ***以上2个方法都是返回数组***

    m》Set

    1》是什么？

    1》新的数据结构，类似于数组
    2》值都是唯一

    ***可以去重,要看数据类型的

    2》使用方法

    new Set()

    add ==>增
    size ==>length
    clear ==>全删
    delete ==>删除某一个
    has ==>查

    3》遍历

    keys()：返回键名的遍历器
    values()：返回键值的遍历器
    entries()：返回键值对的遍历器
    forEach()：使用回调函数遍历每个成员

    4》WeakSet

    方法：
    add
    delete
    has

    ＊＊＊＊set和weakset区别＊＊＊＊

    1>weakset的值必须是对象
    2>方法不同
    3>不可遍历

    n>map

    1>数据结构
    2>map的作用
    key可以是任意的内容

    3>使用

    长度：size
    删除: delete、clear
    增：set()
    查：get()

    4>遍历
    keys()：返回键名的遍历器。
    values()：返回键值的遍历器。
    entries()：返回所有成员的遍历器。
    forEach()：遍历 Map 的所有成员。

    5>WeakMap

    map和weakmap区别

    1》是没有遍历操作
    2》也没有size、clear属性
    3》垃圾回收机制

    n》proxy (代理)

    1》理解：

    源对象
    代理（拦截）
    操作

    易驰衣服 ： 供应商
    代理（张先生）
    用户（买）

    2》使用（拦截）：

    get() : 拦截对象属性的读取
    set() : 拦截对象属性的设置
    deleteProperty() :拦截删除对象key操作

    o》Reflect

    Reflect对象的设计目的有这样几个：

    1》以后方法Reflect对象身上
    2》修改某些Object方法的返回结果
    3》统一标准
    delete obj[key]
    key in obj

    Reflect.has()
    Reflect.deleteProperty(obj, name)

    4》使用方便

    p》 Promise

    理解：解决异步编程的一张方案
    让异步编程写法感觉像是同步感觉

    new Promise(function(resolve, reject){

    })
    .then(function(){

    })
    .then(function(){

    })

    q> Iterator 和 for...of

    1》
    for...of 格式：
    for(let k of xx)

    2》Iterator（遍历器）

    理解：Iterator 接口的目的，就是为所有数据结构，提供了一种统一的访问机制

    r》Generator

    1》函数
    2》异步编程解决方案

    格式：
    let fn = function* (){
    yield
    }
    s》Module 模块

    引入文件：import './common/index'
    引入所有：
    import * as obj from './common';
    抛出：
    export
    export default





    3》案例（项目）










</body>

</html>